<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ArchiteXture</title>
        <link rel="stylesheet" href="../css/styles.css" type="text/css" media="screen" />
        <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <link rel='stylesheet' type='text/css' href='../css/smoothness/jquery.ui.all.css' />
        <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
        <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
        <script type='text/javascript' src='../js/jquery-1.7.1.min.js'></script>
        <script type='text/javascript' src='../js/jquery-ui-1.8.17.custom.min.js'></script>
        <script type='text/javascript' src='../js/jquery.form.js'></script>
        <script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
        <style type="text/css">
            form ul {
                padding: 0.3em;
                text-align: left;
                margin-bottom: 0.5em;
            }
            li {               
                list-style: none outside none;
            }

            label {
                display: block;
                padding:0.2em 0em;
            }

            .logout{
                loat: right;
                text-align: right;
                padding-right: 50px;
            }

            body {
                margin-top: 40px;
                text-align: center;
                font-size: 14px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            }

            #calendar {
                width: 900px;
                margin: 0 auto;
            }

            .start{
                background-color: lightsteelblue
            }

            .over{
                background-color:springgreen
            }

            .frozen{
                background-color:darkgray
            }

            .progress{
                background-color:darkorange
            }

            .feedback{
                background-color:gold
            }

            .failed{
                background-color:red
            }
        </style>
        <script type="text/javascript">
            
            $(document).ready(function() {
	
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                
                var $dialogContent = $("#reportdlg");
                function showDlg(clickdate,neededit){
                                           
                    var day=calendar.fullCalendar("clientEvents",function(e){      
                        return e.start.getTime()==clickdate.getTime();
                    }); //return []
                    
                    $dialogContent.dialog({
                        modal: true,
                        width:430,
                        title: "填写日报内容",
                        open:function(){
                            if(day==null || day.length==0){  //已经存在日报数据的请况下不需要重新获取、生成新的日报
                                $.ajax({
                                    dataType:'json',
                                    url:'../Person/toAddDailyReport.do',
                                    data:{dailydate:clickdate.getTime()},
                                    type:'get',
                                    success:function(data){ 
                                        $('#reportid').val(data.id);
                                        $('#start').val($.fullCalendar.formatDate(clickdate,'yyyy-MM-dd HH:mm'));
                                    },error:function(){
                                        
                                    }
                                });
                            }else{
                                $('#reportid').val(day[0].reportid);
                            }
                        },
                        close: function() {
                            $dialogContent.dialog("destroy");
                            $dialogContent.hide();
                                
                        },
                        buttons: {
                            "保存" : function() {
                                if(neededit){
                                    $('#detail').attr("action", "../Person/updateDailyReportItem.do");
                                  $('#detail').submit();
                                }else{
                                    $('#detail').attr("action", "../Person/addDailyReportItem.do");
                                  $('#detail').submit();
                            }
                        },
                        "取消" : function() {                                    
                            $dialogContent.dialog("close");
                        }
                    }
                }).show();
            }
                
            var options={
                type:'post',
                dataType:'json',
                success:function(responseText, statusText, xhr, $form){
                    var startstring=responseText.start;
                    responseText.start=new Date(startstring);
                    if(responseText.end!=null){
                        var endstring=responseText.end;
                        responseText.end=new Date(endstring)
                    }
                    calendar.fullCalendar('renderEvent',responseText,true);
                    $dialogContent.dialog("close");
                    $('#detail').clearForm();
                }
            };
                        
                        
            $('#detail').ajaxForm(options); 
                                     
                                     
            $( "#slider-percent" ).slider({
                range: "max",
                min: 0,
                max: 100,
                value: 0,
                change: function( event, ui ) {
                      
                    $( "#percent" ).val( ui.value);
                }
            });
                
            $( "#slider-status" ).slider({
                range: "max",
                min: 0,
                max: '${(statuscnt!3)-1}',
                value: 0,
                change: function( event, ui ) {
                    $.getJSON("../Person/getReportStatus.do", {status:ui.value},function(data){
                        $('#status').val(ui.value);
                        $( "#status-span" ).html( data.zhcnName );
                        $( "#status-span" ).attr("class",data.status);
                    });                      
                }
            });
                        
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                droppable: false,
                selectable: true,
                selectHelper: true,
                dayClick: function(clickdate, allDay, jsEvent) {

                    showDlg(clickdate,false)
                },
                eventClick:function(event){
                    $('#id').val(event.id);
                    $('#reportid').val(event.reportid);
                    $('#firstid').val(event.firstid);
                    $('#relationid').val(event.relationid);
                    $('#title').val(event.title);
                    $('#describetext').val(event.describetext);
                    $('#problem').val(event.problem);
                    $('#nextstep').val(event.nextstep);
                    $('#start').val($.fullCalendar.formatDate(event.start,'yyyy-MM-dd HH:mm'));
                    $('#end').val($.fullCalendar.formatDate(event.end,'yyyy-MM-dd HH:mm'));
                    
                    $( "#slider-status" ).slider( "value" ,event.status )
                    $( "#slider-percent" ).slider( "value" , event.percent )
                    
                    //编辑状态下，event.id必定不为空，如果编辑为空则数据错误，不再进行保存
                    if(event.id!=null)
                        showDlg(event.start,true)
                },
                eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {                
                        
                    var oldcal= {start:null};
                    for(var i in event){
                        if(i!='start')
                            oldcal[i]=event[i];
                    }
                    var day=event.start.getDate();
                    var date=new Date(event.start.getTime());
                    date.setDate(day - dayDelta)
                    //event作为保留远处，oldcal用作拖拽件
                    oldcal.start=date;
                    oldcal._start=date;
                    //$('#calendar').fullCalendar('renderEvent', event);
                    $('#calendar').fullCalendar('renderEvent', oldcal);
                        
                    event.id=null;
                    event.reportid=null;
                    $('#firstid').val(event.firstid);
                    $('#relationid').val(event.relationid);
                    $('#title').val(event.title);
                    $('#describetext').val(event.describetext);
                    $('#problem').val(event.problem);
                    $('#nextstep').val(event.nextstep);
                    $( "#slider-status" ).slider( "value" ,event.status )
                    $( "#slider-percent" ).slider( "value" , event.percent )
                        
                    showDlg(event.start);
                },
                events: eval('${detaillist![]}')                   
            });
		
             
        });
        </script>
    </head>
    <body>
        <div id="wrapper"><!-- #wrapper -->

            <nav><!-- top nav -->
                <div class="menu">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">个人工作</a></li>
                        <li><a href="#">需求系统</a></li>
                        <li><a href="#">研发分析</a></li>
                        <li><a href="#">资源管理</a></li>
                        <li><a href="#">项目进度</a></li>
                    </ul>
                </div>
                <div class="logout">登出</div>
            </nav><!-- end of top nav -->

            <header><!-- header -->
                <div id="plandesign"><img src="../images/plans.png" alt="" /></div>
                <h1><a href="#">ArchiteXture</a></h1>
                <p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
            </header><!-- end of header -->

            <section id="main"><!-- #main content and sidebar area -->
                <div id='calendar'></div>
                <div id="reportdlg" style="display:none">
                    <form id="detail" name="detail" action="">
                        <input type="hidden" name="id" id="id" />                        
                        <input type="hidden" name="reportid" id="reportid" />
                        <input type="hidden" name="firstid" id="firstid" />
                        <input type="hidden" name="relationid" id="relationid" />
                        <input type="hidden" name="start" id="start" />
                        <input type="hidden" name="end" id="end" />
                        <ul>
                            <li>
                                <label for="title">工作标题</label>
                                <input type="text" id="title" size="38" name="title" /><!--工作标题-->
                            </li>
                            <li><label for="describetext">工作内容描述</label>
                                <textarea rows="2" cols="36" id="describetext" name="describetext"></textarea><!--工作内容描述-->
                            </li>
                            <li><label for="problem">需要解决的问题</label>
                                <textarea rows="2" cols="36" id="problem" name="problem"></textarea><!--需要解决的问题-->
                            </li>
                            <li><label for="nextstep">下一步采取的措施</label>
                                <textarea rows="2" cols="36" id="nextstep" name="nextstep"></textarea><!--下一步采取的措施-->
                            </li>
                            <li>
                                <p style="margin:0.3em 0"> 
                                    <label style="display:inline" for="status" >当前进展状态</label>
                                    <input type="hidden" id="status" name="status" /><!--当前处理状态-->
                                    <span id="status-span" class="start">开始</span>
                                </p>
                                <div id="slider-status"></div>
                            </li>
                            <li>
                                <p style="margin:0.3em 0"> 
                                    <label style="display:inline" for="percent">完成度</label>
                                    <input type="text" id="percent" name="percent" size="3" maxlength="3" style="text-align: right;border:0; color:#f6931f; font-weight:bold;" />%
                                </p>
                                <div id="slider-percent"></div>
                            </li>
                            <li>
                            </li>
                        </ul>
                    </form>
                </div>
            </section><!-- end of #main content and sidebar-->

            <footer>
                <section id="footer-area">

                    <section id="footer-outer-block">
                        <aside class="footer-segment">
                            <h4>Friends</h4>
                            <ul>
                                <li><a href="#">one linkylink</a></li>
                                <li><a href="#">two linkylinks</a></li>
                                <li><a href="#">three linkylinks</a></li>
                            </ul>
                        </aside><!-- end of #first footer segment -->

                        <aside class="footer-segment">
                            <h4>Awesome Stuff</h4>
                            <ul>
                                <li><a href="#">one linkylink</a></li>
                                <li><a href="#">two linkylinks</a></li>
                                <li><a href="#">three linkylinks</a></li>
                            </ul>
                        </aside><!-- end of #second footer segment -->

                        <aside class="footer-segment">
                            <h4>Coolness</h4>
                            <ul>
                                <li><a href="#">one linkylink</a></li>
                                <li><a href="#">two linkylinks</a></li>
                                <li><a href="#">three linkylinks</a></li>
                            </ul>
                        </aside><!-- end of #third footer segment -->

                        <aside class="footer-segment">
                            <h4>Blahdyblah</h4>
                            <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
                        </aside><!-- end of #fourth footer segment -->

                    </section><!-- end of footer-outer-block -->

                </section><!-- end of footer-area -->
            </footer>

        </div><!-- #wrapper -->
        <!-- Free template created by http://freehtml5templates.com -->
    </body>
</html>
